import React from 'react';
import { Modal, Tabs, Typography } from 'antd';
import styled from 'styled-components';

const { TabPane } = Tabs;
const { Text } = Typography;

interface CssViewerProps {
  open: boolean;
  onClose: () => void;
  markdownTheme: string;
  codeBlockTheme: string;
  isDarkMode: boolean;
}

const CodeBlock = styled.pre`
  background-color: ${props => props.theme.isDark ? '#2a2a2a' : '#f5f5f5'};
  color: ${props => props.theme.isDark ? '#f0f0f0' : '#333'};
  padding: 16px;
  border-radius: 4px;
  overflow: auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
`;

const CssViewer: React.FC<CssViewerProps> = ({
  open,
  onClose,
  markdownTheme,
  codeBlockTheme,
  isDarkMode
}) => {
  // 生成Markdown主题的CSS示例
  const generateMarkdownCss = () => {
    return `/* ${markdownTheme} 主题的CSS示例 */
.markdown-theme-${markdownTheme} {
  /* 基本样式 */
  font-family: ...;
  line-height: ...;
  color: ...;
}

.markdown-theme-${markdownTheme} h1 {
  /* 标题样式 */
  font-size: ...;
  margin-bottom: ...;
}

.markdown-theme-${markdownTheme} p {
  /* 段落样式 */
  margin-bottom: ...;
}

.markdown-theme-${markdownTheme} code {
  /* 行内代码样式 */
  background-color: ...;
  padding: ...;
}

.markdown-theme-${markdownTheme} pre {
  /* 代码块样式 */
  background-color: ...;
  padding: ...;
}

.markdown-theme-${markdownTheme} blockquote {
  /* 引用样式 */
  border-left: ...;
  padding-left: ...;
}`;
  };

  // 生成代码块主题的CSS示例
  const generateCodeBlockCss = () => {
    return `/* ${codeBlockTheme} 主题的CSS示例 */
.code-theme-${codeBlockTheme} {
  /* 基本样式 */
  background-color: ...;
  color: ...;
}

.code-theme-${codeBlockTheme} .token.comment {
  /* 注释样式 */
  color: ...;
}

.code-theme-${codeBlockTheme} .token.keyword {
  /* 关键字样式 */
  color: ...;
}

.code-theme-${codeBlockTheme} .token.string {
  /* 字符串样式 */
  color: ...;
}

.code-theme-${codeBlockTheme} .token.function {
  /* 函数样式 */
  color: ...;
}`;
  };

  // 生成HTML示例
  const generateHtmlExample = () => {
    return `<!-- 使用 ${markdownTheme} 主题的HTML示例 -->
<div class="markdown-theme-${markdownTheme}">
  <h1>这是一个标题</h1>
  <p>这是一个段落，包含<code>行内代码</code>。</p>
  <pre>
    <code class="code-theme-${codeBlockTheme}">
      // 这是代码块
      function example() {
        console.log("Hello World");
      }
    </code>
  </pre>
  <blockquote>
    这是一个引用
  </blockquote>
</div>`;
  };

  return (
    <Modal
      title="CSS样式查看器"
      open={open}
      onCancel={onClose}
      footer={null}
      width={800}
    >
      <Tabs defaultActiveKey="markdown">
        <TabPane tab="Markdown主题" key="markdown">
          <Text>当前Markdown主题: <strong>{markdownTheme}</strong></Text>
          <CodeBlock theme={{ isDark: isDarkMode }}>
            {generateMarkdownCss()}
          </CodeBlock>
        </TabPane>
        <TabPane tab="代码块主题" key="codeBlock">
          <Text>当前代码块主题: <strong>{codeBlockTheme}</strong></Text>
          <CodeBlock theme={{ isDark: isDarkMode }}>
            {generateCodeBlockCss()}
          </CodeBlock>
        </TabPane>
        <TabPane tab="HTML示例" key="html">
          <Text>HTML使用示例</Text>
          <CodeBlock theme={{ isDark: isDarkMode }}>
            {generateHtmlExample()}
          </CodeBlock>
        </TabPane>
      </Tabs>
    </Modal>
  );
};

export default CssViewer; 